<template>
	<div class="detial-item-box" v-link="{'name': 'bookinfo', params: {bookid: bookid}}">
		<!-- 类型更新 + 更新日期 -->
		<div v-show="types.top01">
			<i>{{info.type}}</i> 更新了<br>
			{{info.lastDate}}
		</div>
		<!-- 类型更新 + 更新日期 -->
		<div v-show="types.top02" class="top-02">
			<span>{{info.type}}</span>
			<span>{{info.lastDate}}</span>
		</div>
		<!-- 作者更新 -->
		<div class="item-author" v-show="types.author">
			<span>{{info.author}}</span>
			<i>更新了</i>
		</div>
		<!-- 标题 -->
		<div class="item-title" v-show="types.title">
			<span v-show="types.title === 'b'"><b>{{info.title}}</b></span>
			<span v-else>{{info.title}}</span>
		</div>
		<!-- 简介 -->
		<div class="item-intro" v-show="types.introduction">{{info.introduction}}</div>
		<!-- 阅读 + 喜欢 (样式1) -->
		<div v-show="types.footone" class="foot-type-02">
			<span>阅读 {{info.read}}</span>
			<span>喜欢 {{info.like}}</span>
		</div>
		<!-- 喜欢 + 更新日期 + 阅读 (样式2)-->
		<div v-else>
			<span class="item-like" v-show="types.like">{{info.like}} 人喜欢</span>
			<span class="item-date" v-show="types.date">{{info.lastDate}}</span>
			<span class="item-date" v-show="types.read">{{info.read}} 人阅读</span>
		</div>
	</div>
</template>
<script>
	export default {
		props: ['info', 'bookid', 'type'],
		computed: {
			types: function () {
				switch (this.type) {
				case 'find':
					return {
						// footone: false,
						socile: true,
						like: true,
						date: true,
						read: false,
						introduction: true,
						title: 'o',
						author: true
						// typeUpdate: false
					}
				case 'focus':
					return {
						footone: false,
						like: true,
						date: false,
						read: true,
						introduction: true,
						title: 'b',
						author: false,
						top01: true
					}
				case 'favorite':
					return {
						introduction: false,
						title: 'b',
						author: false,
						top02: true,
						footone: true
					}
				}
			}
		}
	}
</script>
<style scoped>
	.detial-item-box{
		width: 100%;
		padding: 10px 20px;
		border-bottom: 20px solid #ccc;
	}
	.item-author{
		font-size: 1.8rem;
		text-align: center;
		padding: 10px 0;
	}
	.item-author>span{
		font-weight: 900;
	}
	.item-title{
		text-align: center;
		padding: 5px 0;
	}
	.item-intro{
		padding: 10px 0;
	}
	.detial-item-box>div:last-child{
		display: flex;
	}
	.item-like{
		flex:1;
	}
	.item-date{
		flex:1;
		text-align: right;
	}
	b {
		font-size: 1.8rem;
	}
	.foot-type-02 {
		text-align: center;
		margin: 15px 0px 5px 0;
		color: #999;
	}
	.foot-type-02>span {
		padding: 0 8px;
	}
	.top-02 {
		display: flex;
	}
	.top-02>span{
		flex: 1;
		color: #999;
	}
	.top-02>span:last-child {
		text-align: right;
	}
</style>